<!DOCTYPE html>
<html>
<head>
<title>乡镇/街道管理</title>
<meta charset="utf-8">
<link rel="stylesheet" th:href="@{/}+'plugins/layui/css/layui.css'" media="all">
<link rel="stylesheet" th:href="@{/}+'layuiadmin/style/admin.css'" media="all">
<script th:src="@{/}+'js/jquery-2.2.4.min.js'"></script>
  <script th:src="@{/}+'plugins/layui/layui.js'"></script>
  <script th:src="@{/}+'js/tool.js'"></script>
<script th:src="@{/}+'js/day.js'"></script>
<link rel="stylesheet" th:href="@{/}+'plugins/zTree/css/zTreeStyle/zTreeStyle.css'" media="all">
<script th:src="@{/}+'plugins/zTree/js/jquery.ztree.all.min.js'"></script>
<link rel="stylesheet" th:href="@{/}+'plugins/jquery.mloading/jquery.mloading.css'" media="all">
<script th:src="@{/}+'plugins/jquery.mloading/jquery.mloading.js'"></script>
</head>
<body>
<div class="layui-fluid" id="app">
  <div class="layui-card">  
    <div class="layui-card-body">
      <div class="layui-row">
    <div class="layui-col-md3">
       <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="layui-col-md9">
    <div class="layui-btn-group">
    <button type="button" class="layui-btn" data-type="add" th:text="#{eq.Add }">增加</button>
    <button type="button" class="layui-btn" data-type="edit" th:text="#{eq.Modify }">修改</button>
    <button type="button" class="layui-btn" data-type="batchDel" th:text="#{eq.delete }">删除</button>
  </div>
      <table id="town-table" lay-filter="town-table"></table>
    </div>
  </div>
    </div>
  </div>
</div>

<script>

var bodyHeight = top.height - 80;
layui.config({
    base: 'controller/base/district/'
  }).use('town-list', layui.factory('town')).use(['table', 'tree','form'], function(){
  var form = layui.form
  ,table = layui.table;
  
  var treeSetting = {
		async: {
			enable: true,
			url: "district/getDistrictTree",
			autoParam:["id=pid"]
		},
		view:{
			showTitle: true,
			selectedMulti : false
		},callback:{
			beforeExpand: beforeExpand,
			onExpand: onExpand,
			onClick: function(event,treeId,node){
				table.reload('town-table',{
					loading:true,
					where: {areaCode:node.id}
					,page: {
						 curr: 1 //重新从第 1 页开始
					}
				});				
			}
		}
	};
	$.fn.zTree.init($("#treeDemo"), treeSetting);
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
	var curExpandNode = null;
	function beforeExpand(treeId, treeNode) {
		var pNode = curExpandNode ? curExpandNode.getParentNode():null;
		var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null;
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) {
			if (treeNode !== treeNodeP.children[i]) {
				zTree.expandNode(treeNodeP.children[i], false);
			}
		}
		while (pNode) {
			if (pNode === treeNode) {
				break;
			}
			pNode = pNode.getParentNode();
		}
		if (!pNode) {
			singlePath(treeNode);
		}

	}
	function onExpand(event, treeId, treeNode) {
		curExpandNode = treeNode;
	}
	function singlePath(newNode) {
		if (newNode === curExpandNode) return;

        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                rootNodes, tmpRoot, tmpTId, i, j, n;

        if (!curExpandNode) {
            tmpRoot = newNode;
            while (tmpRoot) {
                tmpTId = tmpRoot.tId;
                tmpRoot = tmpRoot.getParentNode();
            }
            rootNodes = zTree.getNodes();
            for (i=0, j=rootNodes.length; i<j; i++) {
                n = rootNodes[i];
                if (n.tId != tmpTId) {
                    zTree.expandNode(n, false);
                }
            }
        } else if (curExpandNode && curExpandNode.open) {
			if (newNode.parentTId === curExpandNode.parentTId) {
				zTree.expandNode(curExpandNode, false);
			} else {
				var newParents = [];
				while (newNode) {
					newNode = newNode.getParentNode();
					if (newNode === curExpandNode) {
						newParents = null;
						break;
					} else if (newNode) {
						newParents.push(newNode);
					}
				}
				if (newParents!=null) {
					var oldNode = curExpandNode;
					var oldParents = [];
					while (oldNode) {
						oldNode = oldNode.getParentNode();
						if (oldNode) {
							oldParents.push(oldNode);
						}
					}
					if (newParents.length>0) {
						zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
					} else {
						zTree.expandNode(oldParents[oldParents.length-1], false);
					}
				}
			}
		}
		curExpandNode = newNode;
	}
  setTimeout(function(){
		treeObj.expandNode(treeObj.getNodes()[0],true,true,true);  
  },100)
  window.loadGrid = function(id){
		var checkStatus = "";
		if(typeof(id)=="undefined"){
			checkStatus = table.checkStatus('town-table');
		    checkData = checkStatus.data; 
		}else{
			checkData = id;
		}
		table.reload('town-table');
		selectedRows(checkData,table,form,'town-table','town-table');
  }
  //事件
  var action = {
	batchDel: function(){
      var checkStatus = table.checkStatus('town-table')
      ,checkData = checkStatus.data; 
      var ids = [];
	  for(let i=0;i<checkData.length;i++){
		  ids[i] = checkData[i].id;
	  }
      if(checkData.length === 0){
        return layer.msg(i18n('eq.selecttodelete'));
      }
      layer.confirm(i18n('eq.suretodelete'), function(index) {
    	  $.ajax({
    		  url:"town/delete",
    		  type:'POST',
    		  dataType:'json',
    		  data:{ids: ids},
    		  success:function(ret){
    			  table.reload('town-table');
    	          layer.msg(i18n('eq.deleted'));
    		  }
    	  })
          
       })
    }
    ,add: function(){
    	var selectedNodes = treeObj.getSelectedNodes();
    	var areaCode = "";
    	if(selectedNodes.length>0){
    		areaCode = selectedNodes[0].id;
    	}
    	layer.open({
    		type: 2,
    		title:i18n('eq.addtownstreet'),
    		area:['700px','400px'],
    		content: 'rooter?url=base/district/add-town&areaCode='+areaCode,
    		btn:[i18n('eq.Save'),i18n('eq.Close')],
    		yes:function(index,layero){
    			var dataForm = layer.getChildFrame('form', index);
    			dataForm.find("#submitBtn").click();
    			return false
    		}
    	});    
    },edit: function(){
	   	 var checkStatus = table.checkStatus('town-table')
	     ,checkData = checkStatus.data; 
		 if(checkData.length !== 1){
	         return layer.msg(i18n('eq.selecttoModify'),{icon:0});
	     }
     
		layer.open({
			type: 2,
			title: i18n('eq.Modifytownstreetinfo'),
			area:['700px','600px'],
			content: 'rooter?url=base/district/add-town&id='+checkData[0].id,
			btn:[i18n('eq.Save'),i18n('eq.Close')],
			yes:function(index,layero){
				var dataForm = layer.getChildFrame('form', index);
				dataForm.find("#submitBtn").click();
				return false
			}
		});    
 	}
  };
  $('.layui-btn').each(function(i,obj){
	  $(this).on('click', function(){
		   var type = $(this).data('type');
		   action[type].call(this);
	  })
  });
});
</script>
</body>